<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>天鼎投资</title>
    <link rel="stylesheet" type="text/css" href="css/styleUI.css">
    <link rel="stylesheet" type="text/css" href="css/styleNGY.css">
    <link rel="stylesheet" type="text/css" href="droploaddist/dropload.css">
</head>
<body>
<div id="page" class="uf uf-ver">
    <div id="dateFixed"></div>
    <div id="container" class="uf-f u-scroll secondBg">
        <img class="banner bb" src="image/static/banner_liveText.jpg">

        <div id="myInertia">
            <div onclick="refreshUrl()" class="refreshIt"></div>
        </div>
        <!--<select id="dateSelect"></select>-->

        <div id="textDiv"></div>

    </div>

</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/Inertia.js"></script>
<script type="text/javascript" src="droploaddist/dropload.min.js"></script>
<script>
    //初始化元素 自由移动
    new Inertia(document.getElementById('myInertia'));
    $(document).ready(function () {
        //刷新
        refresh(dropLoadInit);
        //日期选择
        $("#dateSelect").on("change", function () {
            refreshByDate($(this).val());
        })
    });

    //刷新当前页面地址
    function refreshUrl() {
        $("#container").scrollTop(0);
        var $ele = $(".refreshIt");
        if ($ele.hasClass("spin"))return;
        //开始旋转动画
        $ele.addClass("spin");
        window.location.href = updateUrl();
    }

    //刷新，旋转动画
    function refresh(cb) {
        //文字直播数据接口地址
        var url = "liveText.json";
        var $ele = $(".refreshIt");
        if ($ele.hasClass("spin"))return;
        //开始旋转动画
        $ele.addClass("spin");
        //ajax 获取数据
        $.getJSON(url, function (ret) {
            setTimeout(function () {
                $ele.removeClass("spin");
            }, 500);
//            console.log(ret);
            var list = ret, html = tplReturn(list);
            $("#textDiv").html(html);
            $("#container").scrollTop(0);
            if (cb) {
                cb();
            }
//            getDateList();
        });
    }

    //获取日期列表
    function getDateList() {
        var url = "liveTextDate.json";
        $.getJSON(url, function (ret) {
            var list = ret, html = "";
            if (list && list.length) {
                $.each(list, function (index, item) {
                    html += '<option>' + item.date + '</option>'
                });
                $("#dateSelect").html(html);
            }
        });
    }

    function refreshByDate(date) {
        //文字直播数据接口地址
        var url = "liveText.json?date=" + date;
        var $ele = $(".refreshIt");
        if ($ele.hasClass("spin"))return;
        //开始旋转动画
        $ele.addClass("spin");
        //ajax 获取数据
        $.getJSON(url, function (ret) {
            setTimeout(function () {
                $ele.removeClass("spin");
            }, 500);
//            console.log(ret);
            var list = ret, html = tplReturn(list);
            $("#textDiv").html(html);
        });
    }

    //初始化上下拉刷新
    function dropLoadInit() {
        $('#textDiv').dropload({
            scrollArea: $('#container'),
            threshold: 50,
            loadUpFn: function (me) {
                //刷新整个页面
                window.location.href = updateUrl();
            },
            loadDownFn: function (me) {
                var $last = $('.textLine:last');
                var lastDate = $last.data("date");
                var url = "liveText.json?lastDate=" + lastDate;
                if (!lastDate) {
                    //如果不存在last_id
                    me.lock();// 锁定
                    me.noData();// 无数据
                    me.resetload();// 重置页面刷新状态
                    return;
                }
                $.ajax({
                    type: "get",
                    url: url,
                    dataType: "json",
                    success: function (ret) {
                        var list = ret, html;
                        if (list && list.length) {
                            html = tplReturn(list, 1);
                            //一定时间显示加载效果
                            setTimeout(function () {
                                // 插入数据到页面，放到最后面
                                $last.after(html);
                                // 每次数据插入，必须重置
                                me.resetload();
                            }, 300);
                        } else {
                            me.lock();// 锁定
                            me.noData();// 无数据
                            me.resetload();// 重置页面刷新状态
                        }
                    },
                    error: function (xhr, type) {
                        me.lock();// 锁定
                        me.Err();// 出错了
                        me.resetload();// 即使加载出错，也得重置
                    }
                });
            }
        });
    }


    //根据滚动到的区域左上角显示日期
    var textDivTop = $("#textDiv").position().top;
    $("#container").scroll(function () {
        var a = document.elementFromPoint(0, 0);
        var afterScrollTop = $("#container").scrollTop();
        if (afterScrollTop > textDivTop) {
            if (!$(a).hasClass("dateIndex"))return;
            var date = $(a).data("date");
            $("#dateFixed").html(date).show();
        } else {
            $("#dateFixed").html("").hide();
        }
    });


    //模板
    function tplReturn(data, type) {
        var list = data, html;
        if (list && list.length) {
            var date = list[0].date;
            if (type && type == 1) {
                html = '<div class="ub dateLine dateIndex" data-date="' + date + '">' +
                        '<div class="left"><div class="dot"></div></div>' +
                        '<div class="ub-f date">' + date + '</div>' +
                        '</div>';
            } else {
                html = '<div class="ub textLineIndex dateIndex" data-date="' + date + '">' +
                        '<div class="indexPic"><img src="image/static/tdtz.png"></div>' +
                        '<div class="ub-f uf uf-ver uf-pja">' +
                        '<div class="title">天鼎投资实时解盘</div>' +
                        '<div class="info uf uf-pj uf-ac"><span class="date">' + date + '</span><span></span></div>' +
                        '</div>' +
                        '</div>';
            }
            $.each(list, function (index, item) {
                var date = item.date;
                var time = item.time;
                var text = item.text;
                html += '<div class="ub textLine dateIndex" data-date="' + date + '">' +
                        '<div class="left">' + time + '<div class="dot"></div>' +
                        '</div>' +
                        '<div class="ub-f text">' +
                        '<div class="angle"></div>' + text + '</div>' +
                        '</div>';
            });
        } else {
            html = '<div style="text-align:center;padding-top:3rem;color:#CCC;">暂无数据</div>';
        }
        return html;
    }

    //解决微信浏览器刷新地址缓存问题
    function updateUrl() {
        var url = window.location.href;
        var key = 'refreshTimestamp=';  //默认是"t"
        var reg = new RegExp(key + '\\d+');  //正则：t=1472286066028
        var timestamp = +new Date();
        if (url.indexOf(key) > -1) {
            //有时间戳，直接更新
            return url.replace(reg, key + timestamp);
        } else {
            //没有时间戳，加上时间戳
            if (url.indexOf('\?') > -1) {
                var urlArr = url.split('\?');
                if (urlArr[1]) {
                    return urlArr[0] + '?' + key + timestamp + '&' + urlArr[1];
                } else {
                    return urlArr[0] + '?' + key + timestamp;
                }
            } else {
                if (url.indexOf('#') > -1) {
                    return url.split('#')[0] + '?' + key + timestamp + location.hash;
                } else {
                    return url + '?' + key + timestamp;
                }
            }
        }
    }

</script>

</body>
</html>